import React from 'react'
import { Popover, Icon, Breadcrumb } from 'antd'
import PropTypes from 'prop-types'
import styles from './Header.less'
class Header extends React.Component {
  render () {
    const { header } = this.props
    return (
      <div>
        <div className={styles.header}>
          <a className={styles.title}>{header.title}</a>
          <Popover placement='bottomLeft' content={(header.popoverContent)}>
            { header.hasPopover ? <Icon className={styles.icon} type='question-circle' /> : ''}
          </Popover>
          <Breadcrumb className={styles.subNav}>
            { header.hasSubNav ? header.subNavItem.map(item => {
              return (<Breadcrumb.Item key={item}>
                {item.link ? <a href='#'>{item.title}</a> : item.title }
              </Breadcrumb.Item>)
            }) : ''}
          </Breadcrumb>
        </div>
      </div>
    )
  }
}

Header.propTypes = {
  props: PropTypes.object,
  header: PropTypes.object
}
export default Header
